<template>
  <scroll-view
    ref="scroll"
    class="messages flex-1 bg-F0F0F0 overflow-scroll box-border"
    scroll-with-animation="true"
  >
    <div class="item pb-20px" v-for="(message, index) in data" :key="message.messageUId">
      <!-- 家长发的消息 -->
      <div class="parent flex" v-if="message.senderUserId !== message.receiverUserId">
        <div
          class="avatar flex-center text-white mr-16px p-10px box-border text-center"
          :style="`background-color: ${message.userInfo.avatarBgc};`"
        >
          {{ message.userInfo.relationshipType?studentInfo.name.slice(-2)+'家长':message.userInfo.name }}
        </div>
        <div
          class="content text-black bg-white mt-34px p-16px"
          @click="showMessageDetail(message, index)"
        >
          <!-- 文字消息 -->
          <span v-if="message.messageType === MessageType.TEXT">{{ message.content }}</span>
          <!-- 语音消息 -->
          <div
            class="voice-wrap"
            :class="{ active: playItemIndex === index }"
            v-else-if="message.messageType === MessageType.VOICE"
          >
            <span>{{ message.duration }}''</span>
            <img class="icon" src="static/icons/voice-right.png" mode="" />
          </div>
          <!-- 语音通话/视频通话 -->
          <span
            v-if="
              message.messageType === MessageType.CALL_INVITE_VOICE ||
              message.messageType === MessageType.CALL_INVITE_VIDEO
            "
            >{{ message.content }}</span
          >
        </div>
      </div>
      <!-- 我发的消息 -->
      <div class="user flex justify-end" v-else>
        <div
          class="content text-black bg-white mt-34px p-16px mr-16px"
          @click="showMessageDetail(message, index)"
        >
          <!-- 文字消息 -->
          <span v-if="message.messageType === MessageType.TEXT">{{ message.content }}</span>
          <!-- 语音消息 -->
          <div
            class="voice-wrap"
            :class="{ active: playItemIndex === index }"
            v-else-if="message.messageType === MessageType.VOICE"
          >
            <span>{{ message.duration }}''</span>
            <img class="icon" src="static/icons/voice-left.png" mode="" />
          </div>
          <!-- 语音通话/视频通话 -->
          <span
            v-if="
              message.messageType === MessageType.CALL_INVITE_VOICE ||
              message.messageType === MessageType.CALL_INVITE_VIDEO
            "
            >{{ message.content }}</span
          >
        </div>
        <div
          class="avatar flex-center text-white"
          :style="`background-color: ${message.userInfo.avatarBgc};`"
        >
          {{ message.userInfo.name.slice(-2) }}
        </div>
      </div>
    </div>
  </scroll-view>
</template>

<script>
import ScrollView from '@/components/scroll-view'
import IM from '@/im'
import { mapState } from 'vuex'

const { MessageType } = IM

export default {
  components: {
    ScrollView
  },
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      MessageType,
      scrollTop: 999999,
      playItemIndex: -1
    }
  },
  computed: {
    ...mapState(['im']),
    studentInfo() {
      const { userId, users } = this.im
      return users.find((u) => u.userId === userId)
    }
  },
  mounted() {
    this.audio = document.createElement('audio')
    this.audio.addEventListener('ended', () => {
      this.playItemIndex = -1
    })
    this.audio.addEventListener('error', (e) => {
      console.error(e)

      this.$message.error('语音播放失败')
      this.playItemIndex = -1
    })
  },
  methods: {
    setScrollToLower() {
      setTimeout(() => {
        this.$refs.scroll.setScrollTop(this.scrollTop + 1)
      }, 300)
    },
    showMessageDetail(message, index) {
      const { messageType, content } = message

      switch (messageType) {
        case MessageType.TEXT:
          break
        case MessageType.VOICE:
          this.playItemIndex = index
          this.playAudio(content)
          break
        case MessageType.CALL_INVITE_VOICE:
          break
        case MessageType.CALL_INVITE_VIDEO:
          break
        default:
          break
      }
    },
    playAudio(url) {
      if (!url) return

      this.audio.src = url
      this.audio.play()
    }
  }
}
</script>

<style lang="scss" scoped>
.messages {
  padding: 16px;

  .item {
    .parent,
    .user {
      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 60px;
        font-size: 17px;
      }

      .content {
        max-width: 340px;
        font-size: 20px;
        border-radius: 8px;
        word-break: break-all;

        .voice-wrap {
          display: flex;

          .icon {
            width: 26px;
            height: 26px;
            margin-left: 8px;
          }

          &.active {
            @keyframes play {
              0% {
                opacity: 0.5;
              }

              25% {
                opacity: 0.25;
              }

              50% {
                opacity: 0.5;
              }

              75% {
                opacity: 0.75;
              }

              100% {
                opacity: 1;
              }
            }

            .icon {
              animation: play 1s ease-in-out infinite backwards;
            }
          }
        }
      }
    }
  }
}
</style>
